<template>
    <a-layout-sider width="226">
        <div class="sideTitle">
            <a-icon type="cluster" />
            <span>资料分类</span>
            <div class="slideTitleButton" style="float:right;">
                <a-button icon="plus" size="small" type="primary" @click="addMenu"></a-button>
                <a-button icon="minus" size="small" type="primary"></a-button>
            </div>
        </div>
        <left-menu-list ref="leftMenuList" @addChange="isAddChange"></left-menu-list>
        <add-menu ref="addMenu"></add-menu>
    </a-layout-sider>
</template>
<script>
import leftMenuList from "./component/leftMenuList"
import AddMenu from "./component/addMenu"
export default {
    name:"LeftMenu",
    components:{
        leftMenuList,
        AddMenu
    },
    data(){
        return {
            isAdd:false,
        }
    },
    methods:{
        addMenu(){
            console.log(this.isAdd);
            if(this.isAdd){
                this.$message.error("请先选择文件夹");
                return;
            }
            this.$refs.addMenu.show();
            // let that = this;
            // this.$confirm({
            //     title: '新增分类',
            //     content: (<a-input placeholder="请输入分类名称" style="margin-left:-38px;" />),
            //     okText:"确定",
            //     cancelText:"取消",
            //     icon:'null',
            //     onOk(){
            //         that.$message.success('添加分类成功');
            //     },
            // });
        },
        isAddChange(d){
            this.isAdd = d;
        }
    }
}
</script>
<style lang="less">

    #ImageCapture .ant-layout-sider{
        background:rgba(@primary-color,1);
        color:#fff;
    }
    .sideTitle{
        padding:0 20px;
        line-height: 60px;
        background: #1F649F;
        font-size: 16px;
    }
    .sideTitle i{
        margin-right:8px;
    }
    .slideTitleButton{
        float:right;
    }
    .slideTitleButton button{
        background: #084E8A;
        color:#00A4EA;
        border:none;
        margin-left: 14px;
    }
    .ant-btn > .anticon{
        margin-right: 0;
    }
</style>